import View from "../../layout/View/View.tsx";
import { CSSProperties, useEffect, useState } from "react";
import { Graphics } from "@/layout/Graphics/Graphics.tsx";
import { Spin } from "antd";
import { WAIT_TIME } from "@/config";
import FloatMenu from "@/components/preview/FloatMenu.tsx";

export default function Preview() {
  const [spinning, setSpinning] = useState<boolean>(true);

  let appPage: CSSProperties = {
    height: "100vh",
  };
  let GraphicsPanel: CSSProperties = {
    width: 0,
    height: 0,
    position: "fixed",
    top: 0,
    left: 0,
    zIndex: -1,
  };

  useEffect(() => {
    let timer = setTimeout(() => {
      setSpinning(false);
      clearTimeout(timer);
    }, WAIT_TIME);
    let timerResize = setTimeout(() => {
      if (window.meta2d) {
        window.meta2d.resize();
        window.meta2d.fitView();
      }
      clearTimeout(timerResize);
    }, WAIT_TIME + 100);
  }, []);
  return (
    <>
      <div style={appPage}>
        <div style={GraphicsPanel}>
          <Graphics></Graphics>
        </div>
        <FloatMenu />
        <View></View>
      </div>
      <Spin
        spinning={spinning}
        style={{ background: "#1e1f22" }}
        fullscreen
      ></Spin>
    </>
  );
}
